<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>播放▶</title>


<style type="text/css">
*{
	margin:0;
	padding:0;
}/*清除格式*/
li{list-style: none;}/*清除所有点*/
.wasd{
    width: 1200px;
    height: 1500px;
    background-color: #292929;
    margin:0 auto;
}/*大盒子*/

.div2{
    width: 1200px;
    height: 110px;
    background-color:#292929;
    padding-top: 30px;/* 盒子上内边距 图片上距离*/
}
.div3{
    width: 1200px;
    height: 50px;
    padding: auto 10px;
    border-bottom: 6px solid #303030;
    background-color: #292929;
}
.div2 .left {
    float: left;
    margin-left: 70px;
}

.div2 .right {
    float: right;
    margin-right: 20px;
}
.div2 a {
    color:rgb(255, 255, 255);}
.div2 a:hover{
    color: deepskyblue;
}
/*logo*/
.div3 .daohanglan ul li{ 
    float:left;
	padding:0px 1px; 
}
.div3 .daohanglan ul li a{
    text-decoration:none;
	color:rgb(255, 255, 255);
	font-size:18px;
    display: block;/*转为块级元素 不然没法设置大小*/
    padding: 15px 20px 0;
    height: 40px;}
.div3 .daohanglan ul li a:hover{ 
    background-color: #303030;}
.shouye{ background-color: #303030;}/*首页选中状态*/
/*导航栏*/
.xiala ul{
    float: left;
    width: 76px;
    height: auto;
    display: none;/*隐藏*/
    position: absolute;/*定位 不然会占空间*/
}
.xiala ul li{
	float:none;
    background-color: #292929;
}
.xiala:hover ul{
    display:block;/*鼠标放上去显示*/
}
.xiala ul li a:hover{
    text-decoration:underline;
    color: aqua;
}
.xiala ul li a{
    width: 36px;padding-left: 19px;padding-right: 19px;/*上下有两像素的差距*/
}
/*分类下拉菜单*/
.sousuo{
    float: right;
    margin:20px 10px 0px 0px;
}
/*搜索*/
/*介绍*/
footer {
            width: 100%;
            /*height: 120px;*/
            background-color: #292929;
            border-top: 1px solid #ccc;
            clear: both;
            text-align: center;
            color: #999;
            font-size: 14px;
        }/*对底部进行设置，设置宽度，上外边距，背景颜色，上边框，清除浮动，文本对齐，字体颜色，字体大小*/
        footer ul {
            width: 300px;
            margin: 0px auto;
            line-height: 40px;;
        }/*对底部的无序列表进行设置，设置宽度，外边距，行高*/
        footer ul li {
            float: left;
            margin-left: 9px;
        }/*对底部的无序列表中的列表项进行设置，设置左浮动，左外边距*/
        footer a {
            color: #888;
            text-decoration: none;;
        }/*对底部的a进行设置，设置字体颜色，文本装饰*/
        footer p {
            clear: both;
            line-height: 40px;
        }/*对底部的p进行设置，设置行高，清除浮动*/
/*重复到这里*/

.jianjie{
    width: auto;
    height: 400px;
    border-bottom:1px solid #fff;
}
.tupian{
    width: 270px;
    height: 370px;
    float: left;
    margin: 10px;
    padding: 10px;
}
.jieshao{
    float: left;
    width: 850px;
    height: 150px;
    padding-bottom: 10px;
    /* overflow: hidden;超出部分 直接裁剪 */

}
.jieshao1{
    height: 90px;
    overflow: auto;/*滚动条*/
    border-bottom:1px solid #fff;

}
.jieshao h2{ color: #d0e0f0;
    margin: 10px;
}
.jieshao p{
    color: #e0e0e0;
    margin-bottom: 10px;
}
hr{
    color: #fff;
    margin-bottom:10px;
}
/*简介*/
/*集数*/
.ji{
    float: left;
    width: 850px;
    height: 130px;
    margin-top: 10px;
}
.ji h2{color: #888899;}
.ji div {
    width: 850px;
    height: 174px;
    overflow: auto;/*超出部分滚动条*/
    background-color:#303030;

}
.ji div ul li{
    float: left;
    border: 1px solid #404041;
    width: 148px;
    line-height: 50px;/* 上下剧中 幸好我记得要这样设置，不然又要浪费不少时间*/
    margin: 5px;
    text-align: center;
    color: #60b8cc;
}
.ji div ul li:hover{
    color: #fff;
    background-color:#868686;
}
/*集数*/
/*视频*/
video{
    width: 1100px;
    height: 600px;
}
.sp1{
    width: auto;
    height: 685px;
    text-align: center;
    padding: 25px;
    border-bottom:1px solid #fff;
}
/*视频*/
/* comment发表评论 */
.comment{
    float: left;
    font-size: 15px;
    margin: 0 0 10px 0;
    padding: 3px;
}
</style>
</head>
<body>

	
<div class="wasd">


	<div class="div2">
		<div class="left"><a href="index.html"><img src="sucai/在线动漫.png" title="返回首页"></a></div>
		<div class="right"><a href="denglu.html">登录</a>|<a href="zhuce.html">注册</a></div>
	</div>
	<div class="div3">
		<div class="daohanglan">
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="#">每日推荐</a></li>
				<li><a href="#">最近更新</a></li>
				<li class="xiala"><a href="#">分类</a>
					<ul>
						<li><a href="">热血</a></li>
						<li><a href="">搞笑</a></li>
						<li><a href="">校园</a></li>
						<li><a href="">科幻</a></li>
						<li><a href="">恐怖</a></li>
					</ul>
				</li>
				<li><a href="#">排行榜</a></li>
                <li><a href="#"  class="shouye">播放</a></li>
			</ul>
		</div>
		<dib class="sousuo">
			<form>
                <form>
                    <input type="sousuo" placeholder="输入关键字">
                    <!-- search  搜索 -->
                    <button onclick="search()" type='button'>搜索</button>
                </form>
		</dib>
	</div>


<div class="jianjie">
    <div class="tupian"><img src="sucai/t1.jpg" width="260px"></div>
    <div class="jieshao"><h2>熊熊勇闯异世界</h2>
        <hr style="color: #fff;;" >
        <div class="jieshao1"><p>电视动画《熊熊勇闯异世界》
            改编自くまなの创作的同名小说，由信田祐担任导演，青岛崇担任总编剧，
            中野裕纪担任角色设计，EMT Squared负责动画制作。
            该片讲述了穿着熊熊服装的15岁家里蹲玩家优奈在异世界展开冒险的故事。
            享受着悠然自得家里蹲生活的美少女优奈，是大型虚拟现实多人在线角色扮演游戏
            World Fantasy Online》的骨灰级玩家。
            某天像往常一样登录时，总觉得和平时的状态不一样。莫非……这里是游戏中？还是异世界？
            随后，出现在那里的优奈被装备上了“熊熊服装”“熊熊手套”“熊熊鞋子”。
            “这什么鬼啊——？！”
            熊熊女孩，诞生！
            而且，这只熊并非普通的熊。隐藏着世界最强等级的魔法和技能，是一只超级熊！
            获得了可以征服世界力量的优奈的目标是——在这个世界，也要尽情快乐自由地生活！
            最强无敌的熊熊女孩带来的熊熊冒险和熊熊日常的故事开始了</p>
        </div>

    </div>

        <div class="ji">
            <h2>播放列表</h2>
            <div>
                <ul>
                    <li id="sp1">1</li>
                    <li id="sp2">2</li>
                    <li id="sp3">3</li>
                    <li id="sp4">4</li>
                    <li id="sp5">5</li>
                    <li id="sp6">6</li>

                    <li id="sp7">7</li>
                    <li id="sp8">8</li>
                    <li id="sp9">9</li>
                    <li id="sp10">10</li>
                    <li id="sp11">11</li>
                    <li id="sp12">12</li>
                </ul>
            </div>
        </div>
</div>    
<div class="sp1">
    <video src="sucai/sp1.mp4" controls></video>
</div>


<div class="liuyanban">
    <font color="#d0e0f0">留言板<br></font>
    <textarea style="border:0;background-color:#303030;color: #ccc;" name="a" cols="50" rows="2" placeholder="说点什么吧"></textarea><br/><br/>
    <!-- comment 发表评论 -->
    <button class="comment" onclick="getValue()">发表</button>
</div>

<footer>
	<ul>
		<li><a href="#">关于动漫</a></li>
		<li><a href="#">免责声明</a></li>
		<li><a href="#">动漫目录</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
	<p>Copyright © 动漫网 www.dongman.com 2021-2021, All Rights Reserved.版权所有</p>

	<p>鄂ICP备123456号-2 <img src="sucai/beian.png" /> 鄂公网安备 13456号</p>
</footer>
</div>
</div>

<!-- 后运行js -->
<script src="js/bofang.js"></script>
</body>
</html>
